<template>
<div id="bg">
  <div id="input" style= "background: #ffff;"><!--fixed能保证等比例放大缩小,margin-top: 150px;margin-left:800px;margin-right:300px;-->
  <p  style= "text-align:center;color:#8199fd; font-size:36px;padding-bottom: 30px"><b>注册</b></p>
  <el-form :model="teacher" :rules = "rules" ref="teacherForm"> 
  <el-form-item prop="teacherName" >
      <el-input  size= "mini"  placeholder= "请输入用户名" v-model= "teacher.teacherName" prefix-icon="el-icon-user"></el-input>
  </el-form-item>
  <el-form-item prop="nickName" >
      <el-input  size= "mini"  placeholder= "请输入昵称" v-model= "teacher.nickName" prefix-icon="el-icon-user-solid"></el-input>
  </el-form-item>
  <el-form-item prop="email" >
      <el-input  size= "mini"  placeholder= "请输入邮箱" v-model= "teacher.email" prefix-icon="el-icon-message"></el-input>
  </el-form-item>
  <el-form-item prop="password"> 
      <el-input  size= "mini" style= "" placeholder= "请输入密码" v-model= "teacher.password" show-password prefix-icon="el-icon-lock">
      </el-input>
  </el-form-item>
  <el-form-item prop="password2"> 
      <el-input  size= "mini" style= "" placeholder= "请再次输入密码" v-model= "teacher.password2" show-password prefix-icon="el-icon-lock">
      </el-input>
  </el-form-item>
    </el-form>
      <el-button size="mini" type="primary"   style= "padding:10px 168px;margin-top:10px " aria-autocomplete="off" @click= "submitForm('teacherForm')">注册</el-button>
      <!--aria-autocomplete表示是否给用户提供文本框自动提示-->
      <el-button size="mini" type="info" plain style= "padding:10px 168px;margin:10px 0px " aria-autocomplete="off" @click= "quit">取消</el-button>
      

  </div>
</div>
</template>
<script>
export default {
  name:"regist",
  data(){


      var passwordCheck = (rule,value,callback)=>{
          if(value!=this.teacher.password){
              callback(new Error('两次密码输入不一致！'))
          }else{
              callback();
          }
      };
    return {
      teacher:{
        teacherName:'',
        nickName:'',
        password:'',
        password2:'',
        email:''  
      },  
      checked:false,// 记住密码
      rules:{
        teacherName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
        nickName: [
            { required: true, message: '请输入昵称', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },//blur表示鼠标失焦的时候会触发提示
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        email:[
            {required:true, message: '请输入邮箱', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}

        ],
        password2:[
            {required:true, message: '请再次输入密码', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
            {validator:passwordCheck}//校验两次密码是否一致的自定义规则
        ]
      }

        }
    },
    methods:{
      submitForm(fromName){
        //先校验表单是否合法，不合法就不发出去
        this.$refs['teacherForm'].validate((valid) => {
          if (valid) {
        //合法，发出表单执行登录操作
        this.request.post("http://localhost:8081/teacher/regist",this.teacher).then(res=>{
          if(res.flag=='200'){
            
            this.$message.success("注册成功！")
            this.$router.push("/login")
            
          }
          else{
            this.$message.error(res.msg)
          }

        })
          } 
        });

      },
      quit(){
            this.$router.push("/login")
      }
    }
  




}
</script>
<style scoped>
#bg{
background: 
url("../assets/regist_bg.jpg");
width:100%;
height:100%;
position: fixed;
background-size: 100% 100%;
}
#input{
background-color: rgba(0,0,0,0);
width:30%;
height:65%;
position:fixed;
padding:20px 50px;
margin:10% 35%;
}
</style>